<!DOCTYPE HTML>
<html>

<head>
  <title>Селект</title>
  <script src="https://cdn.polyfill.io/v1/polyfill.js?features=CustomEvent,Element.prototype.closest"></script>
  <link rel="stylesheet" href="customselect.css" />
  <!-- для вашего кода -->
  <script src="customselect.js"></script>
</head>

<body>

  <div>Последний результат: <span id="result">...</span></div>

  <div id="animal-select" class="customselect">
    <button class="title">Выберите</button>
    <ul>
      <!-- значение хранится в свойстве data-value -->
      <li data-value="bird">Птицы</li>
      <li data-value="fish">Рыбы</li>
      <li data-value="animal">Звери</li>
      <li data-value="dino">Динозавры</li>
      <li data-value="simplest">Одноклеточные</li>
    </ul>
  </div>

  <div id="food-select" class="customselect">
    <button class="title">Выберите</button>
    <ul>
      <li data-value="carnivore">Плотоядные</li>
      <li data-value="herbivore">Травоядные</li>
      <li data-value="omnivore">Всеядные</li>
    </ul>
  </div>


  <script>
    var animalSelect = new CustomSelect({
      elem: document.getElementById('animal-select')
    });

    var foodSelect = new CustomSelect({
      elem: document.getElementById('food-select')
    });

    document.addEventListener('select', function(event) {
      document.getElementById('result').innerHTML = event.detail.value;
    });
  </script>

</body>

</html>